<template>
  <div class="total-container">
    <div v-if="!!data1" class="top-box">
      <div class="title">{{ data1.xm }}</div>
      <div class="value">
        <span class="num">
          <countTo :startVal="0" :endVal="+data1.sz" :duration="1200" separator=""></countTo>
        </span>
        <span class="unit">{{ data1.unit }}</span>
      </div>
    </div>
    <div :v-if="!!data2" class="bottom-box">
      <el-carousel indicator-position="outside">
        <el-carousel-item v-for="item in data2" :key="item.id">
          <img class="carousel-image" :src="item.imgPath" alt="">
          <div class="img-title">{{ item.name }}</div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>
<script>
import { getLbData, getJqgk } from '@/api/cultureTuorism.js'
import img1 from '../../img/carousel-icon1.png'
import countTo from 'vue-count-to'
export default {
  data() {
    return {
      data1: null,
      data2: [
        { name: '黄河入海口', imgPath: img1, id: 1 },
        { name: '黄河入海口', imgPath: img1, id: 2 },
        { name: '黄河入海口', imgPath: img1, id: 3 }
      ],
      imgName: '黄河入海口'
    }
  },
  components: {
    countTo
  },
  mounted() {
    this.getData()
  },
  methods: {
    async getData() {
      const res1 = await getLbData('旅游景区')
      this.data1 = res1.result[0]
      // const res2 = await getJqgk()
    }
  }
}
</script>
<style lang="scss" scoped>
.total-container {
  .top-box {
    width: 410px;
    height: 49px;
    background: url('../../img/left-row1-icon1.png') no-repeat center center;
    background-size: 100% 100%;
    margin-left: 10px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      font-family: MicrosoftYaHeiUI;
      font-size: 16px;
      color: #ffffff;
      line-height: 0px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .value {
      display: flex;
      align-items: center;
      .num {
        font-family: YouSheBiaoTiHei;
        font-size: 24px;
        color: #ffdc00;
        line-height: 24px;
        text-align: right;
        font-style: normal;
        text-transform: none;
      }
      .unit {
        margin-left: 6px;
        font-family: MicrosoftYaHeiUI;
        font-size: 14px;
        color: #fefefe;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }
  .bottom-box {
    height: 185px;
    width: 407px;
    margin-top: 12px;
    margin-left: 11px;
    position: relative;
    .img-title {
      position: absolute;
      bottom: 0px;
      left: 5px;
      height: 31px;
      width: 395px;
      background: url('../../img/left-row1-icon2.png') no-repeat center center;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: MicrosoftYaHeiUI;
      font-size: 16px;
      color: #ffffff;
      line-height: 16px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      z-index: 2;
    }
  }
  ::v-deep .el-carousel {
    height: 100%;
    width: 100%;
    .el-carousel__container {
      height: 85%;
      width: 100%;
      border-radius: 6px 6px 6px 6px;
      border: 2px solid #018dfa;
    }
    .el-carousel__indicator .el-carousel__button {
      width: 16px;
      height: 4px;
      background: #ffffff;
      border-radius: 2px 2px 2px 2px;
      opacity: 0.5;
    }
    .is-active .el-carousel__button {
      width: 26px;
      height: 4px;
      background: #4acffb;
      border-radius: 2px 2px 2px 2px;
    }
    .carousel-image {
      height: 100%;
      width: 100%;
      z-index: 1;
    }
  }
}
</style>
